<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>loaclStorage</title>
	</head>
	<body>
		<h2>loaclStorage</h2>
		<button onclick="setData()">点我保存</button>
		<button onclick="getData()">点我获取</button>
		<button onclick="removeData()">点我删除</button>
		<button onclick="clearData()">点我清空</button>

		<script>
			let p = {
				name: '张三',
				age: 20,
				function(params) {},
				a: undefined,
				arr: ['1', '2', '3']
			}

			function setData() {
				localStorage.setItem('person', JSON.stringify(p))
			}
			// 读取的key不存在是null
			function getData() {
				let p = localStorage.getItem('person')
				console.log(JSON.parse(p))
			}
			function removeData() {
				let p = localStorage.removeItem('person')
				console.log(p)
			}
			function clearData() {
				localStorage.clear()
			}
		</script>
	</body>
</html>
